<!DOCTYPE html>
<html lang="en">
<head>
    <title>播放音频</title>
</head>

<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

<body>

<button id="playButton">播放</button>

<script>
    // 获取播放按钮元素
    const playButton = document.getElementById('playButton');


    // 监听播放按钮的点击事件
    playButton.addEventListener('click', () => {
        $.ajax({
            url:"/synthesize/speech",
            headers: {
                'Content-Type': 'application/json'
            },

            data:{
                text:"磊哥真帅，黄老师好喜欢",
                tte:"UTF8",
                vcn:"xiaoyan",
            },
            // dataType:"JSON",
            success:function (result) {
                console.log(result);
                // 创建 <audio> 元素
                const audioElement = new Audio();
                audioElement.src = result;
                // 播放音频
                audioElement.play();

            },
            error:function (a,b,c) {
                console.log(a);
                console.log(b);
                console.log(c);
            }



        })
        // // 构建请求参数
        // const params = {
        //     // 这里是你的参数
        //     // 例如：音频文件名称、格式、其他必要信息
        //         text:"磊哥真帅，汪老师好喜欢啊",
        //         tte:"UTF8",
        //         vcn:"xiaoyan",
        // };
        //
        // // 发送请求
        // fetch('/synthesize/speech', {
        //     method: 'POST',
        //     headers: {
        //         'Content-Type': 'application/json'
        //     },
        //     body:JSON.stringify(params)
        // })
        //     .then(response => response.blob()) // 将响应转换为 Blob 对象
        //     .then(blob => {
        //         // 创建 URL 对象
        //         const audioURL = URL.createObjectURL(blob);
        //
        //         // 创建 <audio> 元素
        //         const audioElement = new Audio();
        //         audioElement.src = audioURL;
        //
        //         // 播放音频
        //         audioElement.play();
        //     })
        //     .catch(error => {
        //         console.error('请求出错:', error);
        //     });
    });
</script>
</body>
</html>